<template>
  <div class="app-container">
    <div class="a1">
      <div class="b1">
        <span class="sp">班级</span>
        <!--        <el-select v-model="classListQuery.class_ids" class="filter-item" @change="getList">-->
        <!--          <el-option v-for="(value,key) in classList" :key="key" :label="value.name" :value="value.id" />-->
        <!--        </el-select>-->
        <span class="sp">姓名</span>
        <el-input v-model="leftStudentName" placeholder="请输入内容" style="width:180px" />
        <el-button type="primary">搜索</el-button>
      </div>
      <el-table
        :data="leftList"
        style="width: 100%"
        stripe
        max-height="500px"
        @selection-change="handleClassSelectionChange"
      >
        <el-table-column type="selection" label="选中" prop="checked" align="center" />
        <el-table-column label="姓名" prop="semester" align="center">
          <template slot-scope="{row}">
            <span>{{ row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="班级" prop="semester" align="center">
          <template slot-scope="{row}">
            <span>{{ row.classInfo.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" prop="semester" align="center">
          <template slot-scope="{row}">
            <span>{{ userTypeOption[row.type] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="middle">
      <el-button type="primary" @click="userToLeft">到左边</el-button>
      <el-button type="primary" @click="userToRight">到右边</el-button>
    </div>
    <div class="a1">
      <div class="b1">
        <span class="sp">小组</span>
        <el-select v-model="rightGroupSearch" class="filter-item" @change="initRightUserList">
          <el-option v-for="item in groupList" :key="item" :label="item" :value="item" />
        </el-select>
        <span>
          <el-button class="add" type="primary" icon="el-icon-circle-plus-outline" @click="addGroup" />
          <el-button class="add" type="primary" icon="el-icon-remove-outline" @click="delGroup" />
        </span>
        <span class="sp">姓名</span>
        <el-input v-model="rightStudentName" placeholder="请输入内容" style="width:180px" />
        <el-button type="primary" @click="initRightUserList">搜索</el-button>
      </div>
      <el-table
        :data="rightListShow"
        style="width: 100%"
        stripe
        max-height="500px"
        @selection-change="handleGroupSelectionChange"
        @cell-click="setGroupManage"
      >
        <el-table-column type="selection" label="选中" prop="checked" align="center" />
        <el-table-column label="ID" align="center" width="60">
          <template slot-scope="{row}">
            <span>{{ row.user_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center">
          <template slot-scope="{row}">
            <span>{{ row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="班级" align="center" width="120">
          <template slot-scope="{row}">
            <span>{{ row.classInfo.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="组别" align="center" width="50">
          <template slot-scope="{row}">
            <span>{{ row.group }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设置组长" prop="checked" align="center">
          <template slot-scope="{row}">
            <input v-model="row.checked" type="checkbox">
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button :type="publishButtonStatus?'primary':'danger'" class="btn1" @click="publish">{{ publishButtonStatus?'发布 ':'取消发布' }}</el-button>
    <el-button type="primary" class="btn" @click="junpToPreview(row)">预览</el-button>
  </div>
</template>

<script>
import { setGroupManage, timeTableUserPage, timetableUserGroupIn, timetableUserGroupOut, groupPublish } from '@/api/course'
import { listQueryFilter } from '@/utils/tool'

export default {
  data() {
    return {
      groupList: [],
      maxGroup: '1',
      list: null,
      radio: '1',
      leftList: [],
      rightList: [],
      rightListShow: [],
      publishButtonStatus: true,
      course_timetable_id: '',
      selectedClassStuIds: [],
      selectedGroupStuIds: [],
      groupUserList: [],
      type: '',
      leftStudentName: '',
      rightStudentName: '',
      userTypeOption: { 0: '本班', 3: '调入' },
      listQuery: { // 查询初始值
        page: 1,
        limit: 100,
        user_type: '',
        course_id: '',
        class_id: [],
        course_timetable_id: this.$route.query.id
      },
      classListQuery: {
        page: 1,
        limit: 500,
        user_type: 1,
        course_timetable_id: this.$route.query.id

      },
      rightGroupSearch: 1, // 右边小组搜索条件变量值
      temp: {
        id: undefined,
        course_id: '',
        courseInfo: {},
        classRoomInfo: {},
        class_ids: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 进入页面调用获取所有的数据
    getList() {
      this.classListQuery = listQueryFilter(this.classListQuery)
      timeTableUserPage(this.classListQuery).then(response => {
        this.list = response.data.list
        this.leftList = []
        this.rightList = []
        this.rightListShow = []
        this.initList()
      })
    },
    // 处理所有数据，分别分配左边显示的数据和右边列表显示的数据
    initList() {
      this.list.forEach(item => {
        if ((Number(item.group) === 0) && (Number(item.type) === 0 || Number(item.type) === 3)) {
          // 获取未分组的小组人数
          this.leftList.push(item)
        } else {
          // 获取已分组的小组人数
          this.rightList.push(item)
        }
        // 获取最大的小组数量
        if (Number(item.group) > this.maxGroup) {
          this.maxGroup = Number(item.group)
        }
      })
      this.initGroupList(this.maxGroup)
      this.initRightUserList()
    },
    // 初始化右边列表显示的数据，要根据小组区分显示那些数据
    initRightUserList() {
      this.rightListShow = []
      this.rightList.forEach(item => {
        if (Number(item.group) === this.rightGroupSearch) {
          if (this.rightStudentName !== '') {
            if (this.rightStudentName === item.userName) {
              // eslint-disable-next-line eqeqeq
              item.checked = item.is_group_manage != 0
              this.rightListShow.push(item)
            }
          } else {
            // eslint-disable-next-line eqeqeq
            item.checked = item.is_group_manage != 0
            this.rightListShow.push(item)
          }
        }
      })
    },
    // 初始化小组下拉列表
    initGroupList(num) {
      this.groupList = []
      for (var i = 1; i <= num; i++) {
        this.groupList.push(i)
      }
    },
    addGroup() {
      this.maxGroup += 1
      this.initGroupList(this.maxGroup)
    },
    delGroup() {
      this.maxGroup -= 1
      if (this.maxGroup < 1) {
        this.maxGroup = 1
      }
      this.initGroupList(this.maxGroup)
    },
    // 把用户移到小组
    userToRight() {
      const params = {
        userIds: this.selectedClassStuIds.join(','),
        courseTimetableId: this.$route.query.id,
        group: parseInt(this.rightGroupSearch)
      }
      timetableUserGroupIn(params).then(res => {
        this.getList()
        this.initRightUserList()
      })
    },
    handleGroupSelectionChange(selectedGroupUsers) {
      this.selectedGroupStuIds = []
      selectedGroupUsers.forEach(item => {
        this.selectedGroupStuIds.push(item.user_id)
      })
    },
    // 把用户移出小组
    userToLeft() {
      const params = {
        userIds: this.selectedGroupStuIds.join(','),
        courseTimetableId: this.$route.query.id,
        group: parseInt(this.rightGroupSearch)
      }
      timetableUserGroupOut(params).then(res => {
        this.getList()
        this.initRightUserList()
      })
    },
    handleClassSelectionChange(selectedUsers) {
      this.selectedClassStuIds = []
      selectedUsers.forEach(item => {
        this.selectedClassStuIds.push(item.user_id)
      })
    },
    // 设置组长
    setGroupManage(row, column) {
      if (column.label !== '设置组长') {
        return
      }
      const params = {
        courseTimetableId: this.$route.query.id,
        userId: row.user_id
      }
      setGroupManage(params).then(res => {
        this.initRightUserList()
      })
    },
    publish() {
      const params = {
        courseTimetableId: this.$route.query.id
      }
      groupPublish(params).then(res => {
        this.publishButtonStatus = !this.publishButtonStatus
        this.$message({
          type: 'success',
          message: this.publishButtonStatus ? '取消发布' : '发布成功'
        })
      })
    },
    junpToPreview() {
      this.$router.push({
        path: '/course/previewGroup',
        query: {
          id: this.$route.query.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    .add{
      text-align: center;
    }
    .middle{
      margin: 280px auto;
    }
    width:100%;
    display: flex;
    justify-content: space-between;
    .sp,.btn{
      margin: 0 8px
    }
    .a1{
      width: 41%;
      .b1{
        margin-bottom: 10px;
        display: flex;
        white-space: nowrap;
        justify-content: center;
        align-items: center;
      }
    }
    .btn{
      position: absolute;
      bottom: 15px;
      left: 50%;
    }
    .btn1{
      position: absolute;
      bottom: 15px;
      left: 42%;
    }
  }
</style>
